$(function() {
  var currentPage = 1;
  var pageSize = 10;
  // 渲染表格数据
  function render() {
    $.ajax({
      url: "/category/querySecondCategoryPaging",
      data: {
        page: currentPage,
        pageSize
      },
      dataType: "json",
      success: function(res) {
        $("tbody").html(template("tmp2", res));
        page(res.total);
      }
    });
  }
  render();

  // 分页
  function page(total) {
    $("#paginator").bootstrapPaginator({
      bootstrapMajorVersion: 3, //默认是2，如果是bootstrap3版本，这个参数必填
      currentPage, //当前页
      totalPages: Math.ceil(total / pageSize), //总页数
      size: "small", //设置控件的大小，mini, small, normal,large
      onPageClicked: function(event, originalEvent, type, page) {
        //为按钮绑定点击事件 page:当前点击的按钮值
        currentPage = page;
        render();
      }
    });
    // 注意：总页数需要根据数据库的总数来算，所一般需要函数，根据总数，生成分页
  }

  // 模态框
  $(".addCategory").click(function() {
    $("#addModal").modal("show");
  });

  // 渲染dropdown数据
  $(".addCategory").click(function() {
    $.ajax({
      url: "/category/queryTopCategoryPaging",
      data: {
        page: 1,
        pageSize: 10000
      },
      dataType: "json",
      success: function(res) {
        $(".render-first-level-menu").html(template("tmp", res));
      }
    });
  });

  // 使下拉框有视觉效果并且将需要的数据保存到隐藏域中
  $(".render-first-level-menu").on("click", ".first-menu-list", function() {
    $(".first-menu-title").text($(this).text());
    $("#saveId").val($(this).data("id"));
    // 更新表单校验状态
    $("#form-validator")
      .data("bootstrapValidator")
      .updateStatus("categoryId", "VALID");
  });

  // 图片上传
  $("#fileupload").fileupload({
    dataType: "json",
    //e：事件对象
    //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
    done: function(e, data) {
      console.log(data);
      $("#brandImg").attr("src", data.result.picAddr);
      $("#brandImgSrc").val(data.result.picAddr);
      // 更新表单校验状态
      $("#form-validator")
        .data("bootstrapValidator")
        .updateStatus("brandLogo", "VALID");
    }
  });

  // 表单校验 使用表单校验插件
  $("#form-validator").bootstrapValidator({
    //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
    excluded: [],

    //2. 指定校验时的图标显示，默认是bootstrap风格
    feedbackIcons: {
      valid: "glyphicon glyphicon-ok",
      invalid: "glyphicon glyphicon-remove",
      validating: "glyphicon glyphicon-refresh"
    },

    //3. 指定校验字段
    fields: {
      // 品牌名称
      brandName: {
        //校验规则
        validators: {
          notEmpty: {
            message: "请输入二级分类名称"
          }
        }
      },
      // 一级分类的id
      categoryId: {
        validators: {
          notEmpty: {
            message: "请选择一级分类"
          }
        }
      },
      // 图片的地址
      brandLogo: {
        validators: {
          notEmpty: {
            message: "请上传图片"
          }
        }
      }
    }
  });

  // 6. 注册校验成功事件, 通过 ajax 进行添加
  $("#form-validator").on("success.form.bv", function(e) {
    // 阻止默认的提交
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "/category/addSecondCategory",
      data: $("#form-validator").serialize(),
      dataType: "json",
      success: function(res) {
        console.log(res);
        $("#addModal").modal("hide");
        render();
        // 表单重置
        $("#form-validator")
          .data("bootstrapValidator")
          .resetForm(true);
        $(".first-menu-title").text("请选择一级分类");
        $("#brandImg").attr("src", "./images/none.png");
      }
    });
  });
});
